<template>
  <div class="user-login absolute">
    <el-tag class="absolute languages pointer" :type="tag.type" @click.native="changeLanguage">{{tag.name}}</el-tag>
    <div class="login-body absolute center-xy">
      <div class="login-center absolute animated swing">
        <div class="head-div fs22 fw600">
          {{titile}}
        </div>
        <div class="login-text">
          <div class="text-name mb10 text-left clearfix">
            <i class="iconfont icon-yonghuqun user-icon fs28 ml5 mr5 pull-left"></i>
            <div class="input-div pn inline-block clearfix">
              <input type="password" style="position:absolute; top: -999px"/>
              <input type="text" class="user-in fs14 pull-left fw600 pn mn" :value="info.user" @input="onInput($event)" @keyup.enter="onLogin" autocomplete="new-password">
            </div>
          </div>
          <div class="text-password mb10 text-left clearfix">
            <i class="iconfont icon-mima password-icon fs28 ml5 mr5 pull-left"></i>
            <div class="input-div pn inline-block clearfix">
              <input type="password" class="password-in fs14 pull-left fw600 pn mn" v-model.trim="info.password" @keyup.enter="onLogin" autocomplete="new-password">
            </div>
          </div>
        </div>
        <div class="log-btn fs20 fw600 pointer animate" @click.stop="onLogin">{{$t("message.loginBtn")}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserLogin',
  data () {
    return {
      titile: 'LOGIN FORM',
      info: {
        user: '',
        password: ''
      },
      tag: {
        name: '中文',
        type: 'success'
      }
    }
  },
  methods: {
    // 登录
    onLogin () {
      for (let key in this.info) {
        if (this.info[key] === '') {
          this.$message.error(this.$i18n.locale === 'CN' ? this.$i18n.messages.CN.message.loginEmpty : this.$i18n.messages.US.message.loginEmpty)
          return
        }
      }
      if (this.info.user === 'yang' && this.info.password !== '') {
        this.$store.commit('onActive', '')
        this.$store.commit('changeLogin', true)
        this.$router.push({
          name: 'HelloWorld'
        })
      } else {
        this.$message.error(this.$i18n.locale === 'CN' ? this.$i18n.messages.CN.message.loginError : this.$i18n.messages.US.message.loginError)
      }
    },
    // 用户校验
    onInput (event) {
      let val = event.target.value.replace(/[\u4E00-\u9FA5]/ig, '')
      event.target.value = val
      this.info.user = val
    },
    // 国际化
    changeLanguage () {
      if (this.tag.name === '中文') {
        this.$set(this.tag, 'name', 'English')
        this.$set(this.tag, 'type', 'warning')
        this.$i18n.locale = 'US'
      } else {
        this.$set(this.tag, 'name', '中文')
        this.$set(this.tag, 'type', 'success')
        this.$i18n.locale = 'CN'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.user-login{
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  overflow: hidden;
  background: url("../assets/login_pic.png") center no-repeat;
  background-size: 100% 100%;
  .languages{
    right: 15px;
    top: 15px;
  }
  .login-body{
    width: 300px;
    height: 200px;
    .login-center{
      left: 0;
      width: 100%;
      top: 0;
      height: 100%;
      background: #ffffff;
      border-radius: 5px;
      box-shadow: 6px 5px 6px #ccc;
    }
    .head-div{
      line-height: 60px;
      color: #646464;
    }
    .login-text{
      .text-name{
        height: 40px;
        background: #97ce68;
        border: none;
        box-shadow: inset 0 4px 8px #95B679;
        .user-icon{
          color: #ffffff;
          line-height: 40px;
          width: 35px;
        }
        .input-div{
          width: 250px;
          height: 100%;
          .user-in{
            height: 100%;
            width: 100%;
            background: none;
            border: none;
            outline: none;
            color: #ffffff;
          }
        }
      }
      .text-password{
        height: 40px;
        background: #6bcbca;
        border: none;
        box-shadow: inset 0 4px 8px #54A6A5;
        .password-icon{
          color: #ffffff;
          line-height: 40px;
          width: 35px;
        }
        .input-div{
          width: 250px;
          height: 100%;
          .password-in{
            height: 100%;
            width: 100%;
            background: none;
            border: none;
            outline: none;
            color: #ffffff;
          }
        }
      }
    }
    .log-btn{
      color: #ffffff;
      height:40px;
      line-height: 40px;
      background: #ff6766;
      box-shadow: inset 0 4px 8px #D05857;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      &:hover{
        background: #FD4A49;
      }
    }
  }
}
</style>
